<template>
  <div class="index01">
    <h5 style="font-size:24px">管理员 欢迎您的到来！！！</h5>
    <div class="card2">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>赛事新闻</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="link(1)">查看全部</el-button>
        </div>
        <el-table :data="newsList" style="width: 100%">
          <el-table-column prop="news_event_id" label="指南id"></el-table-column>
          <el-table-column min-width="300px" label="指南标题">
            <template slot-scope="{row}">
              <span
                @click="lookNews(row.news_event_id)"
                style="cursor:pointer"
              >{{ row.news_event_title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="时间"></el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>比赛公告</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="link(2)">查看全部</el-button>
        </div>
        <el-table :data="cannouncementlist" style="width: 100%">
          <el-table-column prop="competition_id" label="公告id"></el-table-column>
          <el-table-column min-width="300px" label="公告标题">
            <template slot-scope="{row}">
              <span
                @click="lookCam(row.competition_id)"
                style="cursor:pointer"
              >{{ row.competition_title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="时间"></el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="card3">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <b>获奖作品</b>
          <el-button style="float: right; padding: 3px 0" type="text" @click="link(3)">查看更多</el-button>
        </div>
        <div class="tag-group">
          <span class="tag-group__title">类别：</span>
          <el-tag            
            effect="plain"
            @click="all"
            style="cursor:pointer"
          >全部</el-tag>
          <el-tag
            v-for="item in categories"
            :key="item.category_id"
            effect="plain"
            style="cursor:pointer"
            @click="tagCat(item.category_id)"
          >{{ item.category_name }}</el-tag>
        </div>
        <div class="listB">
          <div class="block" v-for="item of wksList" :key="item.index" @click="lookWk(item.wk_id)">
            <el-image :src="item.wk_pic" style="width: 292px;display: block;height: 184px;">
              <div slot="placeholder" class="image-slot">
                加载中
                <span class="dot">...</span>
              </div>
            </el-image>
            <p class="demonstration">
              <b style="width:278px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="item.wk_name">{{item.wk_name}}</b>
            </p>
            <p>
              <span style="color:green">{{item.wk_create_time}}</span>
            </p>
          </div>
          <div class="block" v-show="wksList.length == 0">暂无此类别微课(*^▽^*)~</div>
        </div>
      </el-card>
    </div>
    <el-dialog
      :title="detailCollage.wk_name"
      :visible.sync="disPlay"
      width="50%"
      center
      :before-close="closeDetail"
    >
      <div class="evamine">
        <p>
          微课名称：
          <b>{{detailCollage.wk_name}}</b>
          ——
          <b style="color:blue">{{detailCollage.category_name}}</b> 类
        </p>
        <p>
          <video :src="detailCollage.wk_video_adress" controls id="a1_html5_api" preload="auto"></video>
        </p>
        <p style="text-indent:2em;">{{detailCollage.wk_introduce}}</p>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="centerDialogVisible"
      :before-close="closeDet"
      width="40%"
      center
      :closeOnClickModal="false"
      title="新闻详情"
    >
      <el-form :model="tabData" label-width="100px" class="demo-ruleForm" style="width:95%">
        <el-form-item label="新闻ID" prop="news_event_id ">
          <el-input v-model="tabData.news_event_id" readonly></el-input>
        </el-form-item>
        <el-form-item label="新闻标题" prop="news_event_title">
          <el-input v-model="tabData.news_event_title" readonly></el-input>
        </el-form-item>
        <el-form-item label="新闻内容" prop="news_event_content ">
          <el-input type="textarea" v-model="tabData.news_event_content" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="noticeShow"
      :before-close="closeDet"
      width="40%"
      center
      :closeOnClickModal="false"
      title="公告详情"
    >
      <el-form :model="canData" label-width="100px" class="demo-ruleForm" style="width:95%">
        <el-form-item label="公告ID" prop="competition_id ">
          <el-input v-model="canData.competition_id" readonly></el-input>
        </el-form-item>
        <el-form-item label="公告标题" prop="competition_title">
          <el-input v-model="canData.competition_title" readonly></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="competition_content ">
          <el-input type="textarea" v-model="canData.competition_content" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wkcatList: [],
      wksList: [], //微课列表
      newsList: [], //赛事新闻
      cannouncementlist: [], //赛事公告列表
      categories: [], //微课类别
      disPlay: false,
      detailCollage: {},
      centerDialogVisible: false,
      noticeShow: false,
      tabData: {
        news_event_id: "",
        news_event_title: "",
        news_event_content: ""
      },
      canData: {
        competition_id: "",
        competition_title: "",
        competition_content: ""
      }
    };
  },
  mounted() {
    //首页
    this.getIndex();
  },
  methods: {
    //首页
    getIndex() {
      var that = this;
      that.$axios
        .get("apis/user/index")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataList = res.data.data;
              that.categories = dataList.wk_categories; //微课类别
              var shgg = dataList.wk_competition_announcements;
              if (shgg.length < 5) {
                //赛事公告
                for (var i = 0; i < shgg.length; i++) {
                  shgg[i].create_time = that
                    .$moment(shgg[i].create_time)
                    .format("YYYY-MM-DD");
                }
                that.cannouncementlist = shgg;
              } else {
                var cannounlist = [];
                for (var i = 0; i < 5; i++) {
                  shgg[i].create_time = that
                    .$moment(shgg[i].create_time)
                    .format("YYYY-MM-DD");
                  cannounlist[i] = shgg[i];
                }
                that.cannouncementlist = cannounlist;
              }
              var ssxw = dataList.wk_news_events;
              if (ssxw.length < 5) {
                for (var i = 0; i < ssxw.length; i++) {
                  ssxw[i].create_time = that
                    .$moment(ssxw[i].create_time)
                    .format("YYYY-MM-DD");
                }
                //赛事新闻
                that.newsList = ssxw;
              } else {
                var newlist = [];
                for (var i = 0; i < 5; i++) {
                  ssxw[i].create_time = that
                    .$moment(ssxw[i].create_time)
                    .format("YYYY-MM-DD");
                  newlist[i] = ssxw[i];
                }
                that.newsList = newlist;
              }
              if (dataList.wks.length < 4) {
                //微课
                for (var i = 0; i < 4; i++) {
                  dataList.wks[i].wk_create_time = that
                    .$moment(dataList.wks[i].wk_create_time)
                    .format("YYYY-MM-DD");
                  if (dataList.wks[i].wk_success == 1) {
                    //判断微课是否获奖
                    that.wksList[i] = dataList.wks[i]; //首页只展示4条
                    that.wkcatList = dataList.wks[i];
                  }
                  that.wkcatList = dataList.wks;
                }
              } else {
                for (var i = 0; i < 5; i++) {
                  dataList.wks[i].wk_create_time = that
                    .$moment(dataList.wks[i].wk_create_time)
                    .format("YYYY-MM-DD");
                  if (dataList.wks[i].wk_success == 1) {
                    //判断微课是否获奖
                    that.wksList[i] = dataList.wks[i]; //首页只展示4条
                  }
                  that.wkcatList = dataList.wks;
                }
              }
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    all(){
      this.getIndex();
    },
    closeDetail() {
      var video = document.getElementById("a1_html5_api");
      video.pause(); //暂停控制
      this.disPlay = false;
    },
    closeDet() {
      this.centerDialogVisible = false;
      this.noticeShow = false;
    },
    //xinwen路由跳转
    link(num) {
      var that = this;
      if (num == 1) {
        that.$router.push({ path: "./newsList" });
      } else if (num == 2) {
        that.$router.push({ path: "./guideList" });
      } else if (num == 3) {
        that.$router.push({ path: "./workList" });
      }
    },
    //类别列表点击
    tagCat(id) {
      console.log(id);
      var that = this;
      var catList = that.wkcatList;
      console.log(catList);

      var lbList = [];
      for (var i = 0; i < catList.length; i++) {
        if (id == catList[i].category_id) {
          lbList.push(catList[i]);
        }
      }
      that.wksList = lbList;
      console.log(lbList);
    },
    //查看赛事公告详情
    lookCam(id) {
      var that = this;
      that.$axios
        .post(
          "apis/admin/cannouncementlistdetail",
          this.$qs.stringify({
            competition_id: id
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.noticeShow = true;
              that.canData = res.data.data;
              that.$message({
                message: "查询成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //查看微课详情
    lookWk(id) {
      console.log(id);
      var that = this;
      that.disPlay = true;
      console.log("查看")
      that.$axios
        .post(
          "apis/admin/wklistdetail",
          this.$qs.stringify({
            wk_id: id //删除行的ID
          })
        )
        .then(function(res) {
           console.log(res.data.data.wk);
          if (res.status == 200) {
            that.detailCollage =res.data.data.wk
          }
        })
        .catch(function(error) {
          console.log(error);
        });
     
    },
    //查看新闻赛事详情
    lookNews(id) {
      console.log(id);
      var that = this;
      that.$axios
        .post(
          "apis/admin/newseventlistdetail",
          this.$qs.stringify({
            newsEventId: id
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.centerDialogVisible = true;
              that.tabData = res.data.data;
              that.$message({
                message: "查询成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  }
};
</script>

<style lang="less" scoped>
.index01 {
  text-align: left;
  .el-icon-caret-right {
    color: rgb(211, 49, 49);
    span {
      font-size: 25px;
      font-weight: 500;
    }
  }
  h5 {
    line-height: 50px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .el-tag--plain {
    margin-right: 20px !important;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .card1 {
    margin-bottom: 20px;
    .box-card {
      width: 32.9%;
      display: inline-block;
    }
  }
  .card2 {
    margin-bottom: 20px;
    .box-card {
      width: 49.6%;
      display: inline-block;
      height: 390px;
    }
  }
  .card3 {
    .listB {
      .block {
        width: 23%;
        display: inline-block;
        margin: 10px;
        .el-image {
          width: 100%;
        }
        .demonstration {
          display: flex;
          justify-content: space-between;
          line-height: 30px;
        }
      }
    }
  }
  .evamine {
    width: 90%;
    margin: 0 auto;
    p {
      text-align: left;
      line-height: 40px;
      video {
        width: 100%;
      }
    }
    div {
      width: 40%;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>